<MDXHeader title="Astro" description="Install and configure Astro." />

<Steps>

### Create project

Start by creating a new Astro project:

```bash
npm create astro@latest
```

### Configure your Astro project

You will be asked a few questions to configure your project:

```txt showLineNumbers
- Where should we create your new project? ./shining-saturn
- How would you like to start your new project? Include sample files
- Do you plan to write TypeScript? Yes
- How strict should TypeScript be? Strict
```

### Add Solid to your project

Install Solid using the Astro CLI:

```bash
npx astro add solid
```

<Callout class="mt-4">

Answer `Yes` to all the question prompted by the CLI when installing Solid.

</Callout>

### Add Tailwind CSS to your project

Install Tailwind CSS using the Astro CLI:

```bash
npx astro add tailwind
```

<Callout class="mt-4">

Answer `Yes` to all the question prompted by the CLI when installing Tailwind CSS.

</Callout>

### Edit tsconfig.json file

Add the following code to the `tsconfig.json` file to resolve paths:

```ts {4-9}
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
```

### Run the CLI

Run the `solidui-cli` init command to setup your project:

```bash
npx solidui-cli@latest init
```

### Configure ui.config.json

You will be asked a few questions to configure `ui.config.json`:

```txt showLineNumbers
Would you like to use TypeScript? (recommended) yes
Where is your global CSS file? src/style/globals.css
Where is your tailwind.config.js located? tailwind.config.mjs
Configure the import alias for the src directory: ~/*
```

### Import the globals.css file

Import the `globals.css` file in the `src/pages/index.astro` file:

```ts {2}
---
import "~/styles/globals.css"
---
```

### Update astro tailwind config

To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`.

```ts {3-5}
export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false
    })
  ]
})
```

### Update tailwind.config.mjs

When running `npx solidui-cli@latest init`, your tailwind config for content will be overwritten. To fix this, change the `module.exports` to `export default` and the `content` section with the code below to your `tailwind.config.mjs` file:

```js {2}
export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"]
}
```

### That's it

You can now start adding components to your project.

```bash
npx solidui-cli@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```astro {2,10}
---
import { Button } from "~/components/ui/button"
---

<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>
```

</Steps>
